<template>
  <div class="VisualizationPanel"
       :class="{fullScreen: fullScreen}"
        @click="outClick">
    <div class="dvOperation"  v-show="!isFullScreen">
      <input type="file" id="bkgInput" @change="bkgChange">背景图</input>
      <m-button @click.stop="componentDrawer.visible = !componentDrawer.visible">组件</m-button>
      <m-button @click.stop="fulllScreen" v-show="!fullScreen">全屏</m-button>
      <m-button @click.stop="exitFullScreen" v-show="fullScreen">退出全屏</m-button>
      <m-button @click.stop="preview">预览</m-button>
      {{operationComponent.type}}
    </div>
    <div class="main" >
      <ScaleBox class="scaleBox" ref="ScaleBox" :key="fullScreen">
        <div class="content"
             :style="{
                'background': 'url('+ bkg.url + ')'
             }"
             @drop="operationComponentDrop" @dragover="operationComponentDragOver">
          <vue-draggable-resizable
              class="drag-item"
              :key="item.type + index"
              :parent="true"
              :snap="true"
              :grid="grid"
              :scaleRatio="fullScreen?1:scale"
              v-for="(item, index) in list"
              :w="item.drag.w"
              :h="item.drag.h"
              :x="item.drag.x"
              :y="item.drag.y"
              :active.sync="item.active"
              v-on:dragging="(x,y)=>{onDrag(item,{x,y})}"
              v-on:resizing="(x, y, width, height)=>{onResize(item, {x, y, width, height})}"
              :style="{
                'border-width': item.active? '1px':0
              }"
          >
            <div class="item-operation" v-show="item.active">
              <div class="item-operation-button click">编辑样式</div>
              <div class="item-operation-button click" @click.stop="frameDrawerEdit(item)">边框</div>
            </div>
            <div class="item-content">
              <m-charts-line
                  v-if="item.type === 'ChartLine'"
                  :data="item.data"
              ></m-charts-line>
              <content-editable v-model="item.data" class="component-Text" v-else-if="item.type === 'Text'"></content-editable>
            </div>

            <div class="item-frame" v-if="item.frame">
              <component :is="item.frame.type" ref="drag-item-frame" :key="new Date().getTime()"></component>
            </div>
          </vue-draggable-resizable>

        </div>
        <div class="grid"></div>
      </ScaleBox>
    </div>

    <div class="drawerBox" v-show="componentDrawer.visible">
<!--      <m-button @click="addComponent">新增</m-button>-->
      <div class="item cursor" draggable="true" @dragstart="operationComponentDrag('ChartLine')">
        <i class="el-icon-pie-chart item-img"></i>
        <div class="item-text" >折线图</div>
      </div>
      <div class="item cursor" draggable="true" @dragstart="operationComponentDrag('Text')">
        <i class="el-icon-pie-chart item-img"></i>
        <div class="item-text" >文字框</div>
      </div>
    </div>

    <div class="drawerBox" v-show="frameDrawer.visible" @click.stop="">
      <div class="item"
           :class="{active: !frameDrawer.data.frame || !frameDrawer.data.frame.type}"
           @click="frameDrawer.data.frame = {}"
      >
        <i class="el-icon-pie-chart item-img"></i>
        <div class="item-text" >无</div>
      </div>

      <div class="item"
           v-for="item in frameDrawer.typeOptions"
           :class="{active: item.value === frameDrawer.data.frame.type}"
           @click="frameDrawerPreview(item)"
      >
        <i class="el-icon-pie-chart item-img"></i>
        <div class="item-text" >{{ item.label }}</div>
      </div>

    </div>
  </div>
</template>

<script>
import ScaleBox from "./ScaleBox";
export default {
  name: "VisualizationPanel",
  data() {
    return {
      bkg: {
        url: null
      },
      isFullScreen: false,
      fullScreen:false,
      componentDrawer: {
        visible: false
      },
      scale: 0.68,
      grid: [20,20],
      active: false,
      operationComponent:{
        current: null,
        type: null
      },
      list: [
        // {
        //   x: 80,
        //   y: 80,
        //   w: 400,
        //   h: 400,
        //   data: [
        //     {
        //       name: 'A',
        //       data: [
        //         {name: 'Mon', value: 123},
        //         {name: 'Tue', value: 23},
        //         {name: 'Wed', value: 213},
        //         {name: 'Thu', value: 12},
        //         {name: 'Fri', value: 45},
        //         {name: 'Sat', value: 98},
        //         {name: 'Sun', value: 329},
        //       ],
        //     },
        //     {
        //       name: 'B',
        //       data: [
        //         {name: 'Mon', value: 23},
        //         {name: 'Tue', value: 23},
        //         {name: 'Wed', value: 13},
        //         {name: 'Thu', value: 12},
        //         {name: 'Fri', value: 45},
        //         {name: 'Sat', value: 98},
        //         {name: 'Sun', value: 29},
        //       ]
        //     }
        //   ]
        // }
      ],
      frameDrawer:{
        visible: false,
        data: {},
        defaultData:{},
        formData:{
          type: ''
        },
        typeOptions: [

        ]
      }
    }
  },
  components: {
    ScaleBox
  },
  mounted() {
    window.onresize = () => {
      // 可视区域的高度
      const clientHeight = document.documentElement.clientHeight || document.body.clientHeight
      // screen是window的属性方法，window.screen可省略window，指的是窗口
      this.isFullScreen = screen.height == clientHeight
    }
  },
  methods: {
    preview(){
      var de = document.documentElement;
      if (de.requestFullscreen) {
        de.requestFullscreen();
      } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
      } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
      }
      this.fulllScreen()
      this.componentDrawer.visible = false
    },
    exitFullScreen(){
      this.fullScreen = false
    },
    fulllScreen(){
      this.fullScreen = true
    },
    onDrag: function (item, e) {
      item.drag.x = e.x
      item.drag.y = e.y
    },
    onResize: function (item, e) {
      item.drag.x = e.x
      item.drag.y = e.y
      item.drag.w = e.width
      item.drag.h = e.height
    },

    addComponent(data){
      data.key = data.type + '-' + new Date().getTime()
      data.frame = {}
      if(data.type === 'ChartLine'){
        this.addComponentChartLine(data)
      }else
      if(data.type === 'Text'){
        this.addComponentText(data)
      }
    },
    addComponentText(data){
      let addData = {
        drag:{
          x: 0,
          y: 0,
          w: 400,
          h: 60,
        },
        isLocked: false,
        data: ''
      }
      addData = this.$m.mergeDeep(addData,data)
      this.list.push(addData)
    },
    addComponentChartLine(data){
      let addData = {
        drag:{
          x: 0,
          y: 0,
          w: 400,
          h: 400,
        },
        data: [
          {
            name: 'A',
            data: [
              {name: 'Mon', value: 123},
              {name: 'Tue', value: 23},
              {name: 'Wed', value: 213},
              {name: 'Thu', value: 12},
              {name: 'Fri', value: 45},
              {name: 'Sat', value: 98},
              {name: 'Sun', value: 329},
            ],
          },
          {
            name: 'B',
            data: [
              {name: 'Mon', value: 23},
              {name: 'Tue', value: 23},
              {name: 'Wed', value: 13},
              {name: 'Thu', value: 12},
              {name: 'Fri', value: 45},
              {name: 'Sat', value: 98},
              {name: 'Sun', value: 29},
            ]
          }
        ],
      }
      addData = this.$m.mergeDeep(addData,data)
      addData.drag.x = addData.drag.x - 0.5*addData.drag.w
      addData.drag.y = addData.drag.y - 0.5*addData.drag.h
      addData.drag.x = parseInt(addData.drag.x /40)*40
      addData.drag.y = parseInt(addData.drag.y/40)*40
      if(addData.drag.x < 0){
        addData.drag.x = 0
      }
      if(addData.drag.y < 0){
        addData.drag.y = 0
      }
      this.list.push(addData)
    },
    operationComponentDrag(type){
      this.operationComponent.current = true
      this.operationComponent.type = type
    },
    operationComponentDragOver(e){
      this.operationComponent.current = true
      e.preventDefault();
    },
    operationComponentDrop(e){
      if(this.operationComponent.current){
        console.log(e)
        let addData = {
          type: this.operationComponent.type,
          drag: {
            x: e.offsetX,
            y: e.offsetY
          }
        }
        console.log(addData)
        this.addComponent(addData)
        // this.operationComponent.current=null
        // this.operationComponent.type=null
      }
    },
    bkgChange(e){
      let _this = this
      var files = e.target.files[0]
      if (!e || !window.FileReader) return  // 判断是否支持FileReader
      let reader = new FileReader()
      reader.readAsDataURL(files) // 文件转换
      reader.onloadend = function () {
        _this.bkg.url = this.result
        console.log(this.result)
        // _this.textHide=false;
      }
    },
    inputDiv(item, e){
      console.log(item.isLocked, e.target.innerHTML)
      if(!item.isLocked){
        item.data = e.target.innerHTML

      }
    },
    frameDrawerEdit(item){
      let options = []
      for(var i = 1;i<14;i++){
        options.push({
          label: 'dv-border-Box-' + i,
          value: 'dv-border-Box-' + i
        })
      }

      this.frameDrawer.typeOptions = options

      this.frameDrawer.visible =true
      this.frameDrawer.data = item
      this.frameDrawer.defaultData = this.$m.cloneDeep(item)
      // this.frameDrawer.formData.type = item.frame.type

    },
    frameDrawerPreview(item){
      this.frameDrawer.data.frame.type = item.value
      this.$forceUpdate()
      console.log(this.frameDrawer,item)
      // this.frameDrawer.formData.type = item.value
      // this.list.forEach((e)=>{
      //   if(e.key === this.frameDrawer.data.key){
      //     e.frame = {
      //       ...e.frame,
      //       ...this.frameDrawer.formData
      //     }
      //   }
      // })
    },
    frameDrawerClose(){
      this.frameDrawer.visible = false
    },
    frameDrawerRecover(){
      this.frameDrawer.data = this.frameDrawer.defaultData
      this.$forceUpdate()
      console.log(this.frameDrawer.defaultData.frame)
    },
    outClick(){
      this.componentDrawer.visible =false
      this.frameDrawerClose()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/MCharts/style/var.scss";
.VisualizationPanel{
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: transparent!important;
  padding: 0!important;
  //color: #fff;

  .main{
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .content{
    width: 100%;
    height: 100% ;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 10;
  }
  .grid{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 40px 40px,
    linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 40px 40px;
    border: 1px solid $borderColor;
    z-index: 0;
  }
  .scaleBox{
    //width: px2(1920);
    //height: px2(1080);
    position: relative!important;

  }
  &.fullScreen{
    position: fixed!important;
    width: 100% !important;
    height: 100% !important;
    left: 0;
    top: 0;
    background-color: #fff!important;
  }
}
.dvOperation{
  width: px2(100);
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
  display: flex;
  flex-direction: column  ;
  text-align: left;
  button{
    margin-bottom: px2(20);
    width: 100%;
    margin-left: 0;
  }
}
.drag-item{
  border-width: 0;
  white-space: nowrap;
  .item-operation{
    position: absolute;
    top: 0;
    left: 0;
    color: $mainColor;
    width: 100%;
    line-height: px2(40);
    transform: translateY(-100%);
    font-size: px2(18);
    text-align: right;
    z-index: 1;
    .item-operation-button{
      display: inline-block;
      margin-left: px2(20);
    }
  }
  .item-frame{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
  }
  .item-content{
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    border: 0;
    .component-Text{
      line-height: px2(60);
      font-size: px2(24);
      padding: 0 px2(4);
      width: 100%;
      height: 100%;
      overflow-y: auto;
      text-align: center;
      &::-webkit-scrollbar{
        display:none
      }
    }
  }
}
.drawerBox{
  width: px2(200);
  height: 100%;
  border-top: px2(1) solid $borderColor;
  background-color: rgba(255,255,255,0.9);
  z-index: 10;
  position: absolute;
  right: 0;
  top: 0;
  color: $fontColor;
  overflow-y: auto;
  .item{
    display: inline-block;
    height: px2(100);
    width: 49%;
    font-size: px2(40);
    text-align: center;
    padding-top: px2(10);
    margin-bottom: px2(10);
    vertical-align: top;
    &::hover{
       cursor: pointer;
    }
    .img{

    }
    .item-text{
      font-size: px2(16);
    }
    &.active{
      border: 1px solid $mainColor;
    }
  }
}
</style>
